<!--附件列表预览-->
<template>
	<div class="file-container">
		<a v-for="(file, index) in files" :key="file.id || index" :href="file.url || ''" :title="file.fileOriginName || ''" target="_blank">
			<svg-icon :icon-class="getFileIcon(file)" />
			<span>{{ file.fileOriginName }}</span>
		</a>
	</div>
</template>

<script lang="ts">
	export default {
		name: 'FilePreview'
	}
</script>

<script lang="ts" setup>
	import {ref} from 'vue'
	import {Img} from 'yuxin-base/src/types'
	import {getFileIcon} from 'yuxin-base/src/utils'
	import fileApi from 'yuxin-base/src/api/file-api'

	const props = defineProps<{
		bizId?: string
		files?: Img[]
	}>()

	const files = ref<Img[]>(props.files || [])

	if (props.bizId) {
		fileApi.getFileList(props.bizId).then(({data}) => {
			files.value = data
		})
	}
</script>

<style lang="less" scoped>
	.file-container {
		display: inline-flex;
		flex-wrap: wrap;
		gap: 8px;

		a {
			width: 200px;
			display: flex;
			column-gap: 8px;
			align-items: center;
			font-size: @font-size-sm;

			.svg-icon {
				min-width: 20px;
				min-height: 20px;
			}

			> span {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
</style>
